<template>
  <div class="app-container">
    <el-row>
      <el-col :span="16">
        <div class="bg-purple">
          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">工程立项</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
              <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="130px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程名称:" prop="projectName" class="form-item">
                      <el-input v-model="editForm.projectName" class="filter-item" placeholder="工程名称"/>
                    </el-form-item>
                    <el-form-item label="工程规模:" prop="scale" class="form-item">
                      <el-input v-model="editForm.scale" class="filter-item" placeholder="工程规模"/>
                    </el-form-item>
                    <el-form-item label="机构名称:" prop="orgName" class="form-item">
                      <el-select v-model="editForm.orgName" placeholder="请选择" ref="selectReport"
                                 popper-class="select-popper" class="form-select"
                                 :popper-append-to-body="false">
                        <el-option
                          :value="editForm.orgID"
                          :label="editForm.orgName"
                          style="
                width: 450px;
                height: 200px;
                overflow: auto;
                background-color: #fff;
              "
                        >
                          <el-tree
                            :data="orgList"
                            :props="{value: 'orgID',label: 'orgName',}"
                            @node-click="handleNodeClick"
                          ></el-tree>
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="是否需要招标:" prop="needBidding" class="form-item">
                      <el-select placeholder="请选择" style="width:100%;" clearable v-model="editForm.needBidding"
                                 class="form-select" :popper-append-to-body="false" popper-class="select-popper">
                        <el-option :value="0" label="不需要招标"></el-option>
                        <el-option :value="1" label="需要招标"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="总投资(元):" prop="investment" class="form-item">
                      <el-input v-model="editForm.investment" class="filter-item" placeholder="总投资"/>
                    </el-form-item>
                    <el-form-item label="项目情况:" prop="situation	" class="form-item">
                      <el-input v-model="editForm.situation" class="filter-item" placeholder="项目情况"
                                type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
                    </el-form-item>
                    <el-form-item label="工程建设目的:" prop="purpose	" class="form-item">
                      <el-input v-model="editForm.purpose" class="filter-item" placeholder="工程建设目的"
                                type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
                    </el-form-item>
                    <el-form-item label="工程建设内容:" prop="content	" class="form-item">
                      <el-input v-model="editForm.content" class="filter-item" placeholder="工程建设内容"
                                type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">项目预算</span>
              <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="130px">
              <el-form-item label="招标控制价:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="招标控制价"/>
              </el-form-item>
              <el-form-item label="招标审核价:" prop="examinePrice" class="form-item">
                <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="招标审核价"/>
              </el-form-item>
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">开始招标</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="建设单位:" prop="ctrlPrice" class="form-item">
                    <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="建设单位"/>
                  </el-form-item>
                  <el-form-item label="建设单位负责人:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="建设单位负责人"/>
                  </el-form-item>
                  <el-form-item label="招标方式:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="招标方式"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="招标范围:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="招标范围"/>
                  </el-form-item>
                  <!--<el-form-item label="上传资料:" prop="orgID" class="form-item">
                    <el-button class="btn-add" type="warning" size="mini"
                               icon="el-icon-upload" @click="upLoad">点击上传
                    </el-button>
                  </el-form-item>-->
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">招标完成</span>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="130px">
              <el-form-item label="招标备注:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="招标备注"
                          type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
              </el-form-item>
              <!--<el-form-item label="上传资料:" prop="orgID" class="form-item">
                <el-button class="btn-add" type="warning" size="mini"
                           icon="el-icon-upload" @click="upLoad">点击上传
                </el-button>
              </el-form-item>-->
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">合同签定</span>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="施工单位:" prop="ctrlPrice" class="form-item">
                    <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="施工单位"/>
                  </el-form-item>
                  <el-form-item label="施工单位负责人:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="施工单位负责人"/>
                  </el-form-item>
                  <el-form-item label="合同开始日期:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="合同开始日期"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同结束日期:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="合同结束日期"/>
                  </el-form-item>
                  <el-form-item label="合同签署日期:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="合同签署日期"/>
                  </el-form-item>
                 <!-- <el-form-item label="上传资料:" prop="orgID" class="form-item">
                    <el-button class="btn-add" type="warning" size="mini"
                               icon="el-icon-upload" @click="upLoad">点击上传
                    </el-button>
                  </el-form-item>-->
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">建设开工</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="130px">
              <el-form-item label="开工日期:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="开工日期"
                          type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
              </el-form-item>
              <!--<el-form-item label="上传资料:" prop="orgID" class="form-item">
                <el-button class="btn-add" type="warning" size="mini"
                           icon="el-icon-upload" @click="upLoad">点击上传
                </el-button>
              </el-form-item>-->
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">工程建设</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="130px">
              <el-form-item label="计划竣工日期:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="计划竣工日期"/>
              </el-form-item>
              <el-form-item label="监理单位:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="监理单位"/>
              </el-form-item>
              <el-form-item label="施工项目负责人:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="施工项目负责人"/>
              </el-form-item>
              <el-form-item label="备注说明:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="备注说明"
                          type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
                <!--<el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="备注说明"/>-->
              </el-form-item>
            </el-form>
            <div class="card-footer">
              <el-button size="mini" @click="navTo('0')">建设质量控制</el-button>
              <el-button size="mini" @click="navTo('1')">项目付款</el-button>
            </div>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">工程验收</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="130px">
              <el-form-item label="完工日期:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="完工日期"/>
              </el-form-item>
              <el-form-item label="验收日期:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="验收日期"/>
              </el-form-item>
              <el-form-item label="验收结果:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="验收结果"/>
              </el-form-item>
              <el-form-item label="备注:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="备注"
                          type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
                <!--<el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="备注"/>-->
              </el-form-item>
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">项目审价</span>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="审定价:" prop="ctrlPrice" class="form-item">
                    <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="审定价"/>
                  </el-form-item>
                  <el-form-item label="超支金额:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="超支金额"/>
                  </el-form-item>
                  <el-form-item label="超支比率:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="超支比率"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="审核单位:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="审核单位"/>
                  </el-form-item>
                  <el-form-item label="审核日期:" prop="examinePrice" class="form-item">
                    <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="审核日期"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">项目付款</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="120px">
              <el-form-item label="项目付款:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="项目付款"/>
              </el-form-item>
              <el-form-item label="付款日期:" prop="examinePrice" class="form-item">
                <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="付款日期"/>
              </el-form-item>
              <el-form-item label="备注:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="备注"
                          type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
                <!--<el-input v-model="editForm.examinePrice" class="filter-item" placeholder="备注"/>-->
              </el-form-item>
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">项目归档</span>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="budgetForm" :rules="editFormRules" ref="budgetForm" label-width="120px">
              <el-form-item label="归档日期:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="归档日期"/>
              </el-form-item>
              <el-form-item label="归档号:" prop="examinePrice" class="form-item">
                <el-input v-model="editForm.examinePrice" class="filter-item" placeholder="归档号"/>
              </el-form-item>
              <el-form-item label="归档说明:" prop="ctrlPrice" class="form-item">
                <el-input v-model="editForm.ctrlPrice" class="filter-item" placeholder="归档说明"
                          type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
              </el-form-item>
            </el-form>
          </el-card>

        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="icon-clearfix">
              <el-button type="text" circle icon="el-icon-document-add" @click="directoryAdd">添加目录</el-button>
              <el-button type="text" circle icon="el-icon-upload" @click="upLoad">上传材料</el-button>
            </div>
            <div class="head-container">
              <el-row>
                <el-col :span="10">
                  <el-tree
                    :data="deptOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                  />
                </el-col>
                <el-col :span="14">
                  <div class="to-right">
                    <i class="el-icon-tickets"></i>
                    <span class="title">相关资料文件.doc</span>
                    <div class="text-btn">
                      <el-button type="text" size="mini" class="btns">预览</el-button>
                      <el-button type="text" size="mini" class="btns">下载</el-button>
                      <el-button type="text" size="mini" class="btns">修改</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import { doPost, doGet, doFile, orglistChild } from '@/api/index'

  export default {
    name: "projectUpeate",
    data() {
      return {
        editForm: {
          projectName: '',
          scale: '',
          orgID: '',
          orgName: '',
          needBidding: '',
          investment: '',
          situation: '',
          purpose: '',
          content: ''
        },
        editFormRules: {},
        budgetForm: {
          ctrlPrice: '',
          examinePrice: ''
        },
        deptOptions: [
          {
            id: 100,
            label: "测试一",
            children: [
              {
                id: 102,
                label: "测试1-1"
              },
              {
                id: 103,
                label: "测试1-2"
              }
            ]
          }
        ],
        defaultProps: {
          children: "children",
          label: "label"
        },
        orgList: []
      }
    },
    created() {
      this.orgGetList()
    },
    methods: {
      orgGetList(){
        orglistChild().then(res=> {
          this.orgList = res.data
        }).catch(error => {
          this.orgList = []
        })
      },
      upLoad() {},
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      //选择部门
      handleNodeClick(val) {
        this.$set(this.editForm, "orgID", val.orgID);
        this.$set(this.editForm, "orgName", val.orgName);
        if (!val.children || val.children.length == 0) {
          this.$refs.selectReport.blur();
        }
      },
      //添加目录
      directoryAdd() {},
      navTo(type) {
        if (type == 0) {
          this.$router.push({ name: 'quality', params: { id: 1 }})
        } else {
          this.$router.push({ name: 'pay', params: { id: 1 }})
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/style.scss';
  .el-button.is-circle {
    padding: 0;
  }
</style>
